<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <el-tabs v-model="activeName">
                <el-tab-pane label="GPS续费监控信息" name="first">

                    <el-descriptions title="基本信息"></el-descriptions>
                    <div class="basic">
                        <CarBaseInfo :form="form"></CarBaseInfo>
                    </div>

                    <el-descriptions title="GPS续费监控信息">
                        <el-descriptions-item label="GPS安装时间">
                            {{ form.installTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="GPS到期时间">
                            {{ form.installExpireTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="设备时效">
                            {{ 0==form.gpsAging?'有效':1==form.gpsAging?'无效':'--' }}
<!--                            {{ form.gpsAging|filterNull }}-->
                        </el-descriptions-item>
                        <el-descriptions-item label="设备编号">
                            {{ form.renewEquipmentNo|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="设备类型">
                            <dict-tag
                                :options="dict.type.gps_device_type"
                                :value="form.renewEquipmentType"/>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions title="GPS续费信息">
                        <el-descriptions-item label="到期GPS品牌">
                            {{ form.expireGpsBrand|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="到期设备类型">
                            <dict-tag
                                :options="dict.type.gps_device_type"
                                :value="form.expireEquipmentType"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="到期SIM卡号">
                            {{ form.expireSim|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="安装到期时间">
                            {{ form.installExpireTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="是否需要续费">
                            {{ 1==form.renewFlag?'是':2==form.renewFlag?'否':'--' }}
                        </el-descriptions-item>
                        <el-descriptions-item label="续费设备类型">
                            <dict-tag
                                :options="dict.type.gps_device_type"
                                :value="form.renewEquipmentType"/>
                        </el-descriptions-item>
                        <el-descriptions-item label="续费设备编号">
                            {{ form.renewEquipmentNo|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="续费SIM卡号">
                            {{ form.renewSim|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="续费年限">
                            {{ form.renewYear|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="续费费用">
                            {{ form.renewPrice|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="续费开始时间">
                            {{ form.renewStartTime|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="续费结束时间">
                            {{ form.renewEndTime|filterNull }}
                        </el-descriptions-item>
                    </el-descriptions>

                </el-tab-pane>

                <el-tab-pane label="续费记录" name="second">
                    <el-table
                        border
                        :data="recordList"
                        style="width: 100%">
                        <el-table-column
                            type="index" label="序号" align="center"
                            width="50">
                        </el-table-column>
                        <el-table-column
                            prop="name" align="center" width="80"
                            label="操作">
                            <template v-slot="{row}">
                                <e-button size="mini" type="text" @click="goDetail(row)">查看
                                </e-button>
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="115"
                            prop="handleStatus" align="center"
                            label="GPS安装时间">
                            <template v-slot="{row}">
                                {{ row.installTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="115"
                            prop="collectUnit" align="center"
                            label="GPS到期时间">
                            <template v-slot="{row}">
                                {{ row.installExpireTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="90"
                            prop="violationTime" align="center"
                            label="续费年限">
                            <template v-slot="{row}">
                                {{ row.renewYear|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="90"
                            prop="violationEvent" align="center"
                            label="续费费用">
                            <template v-slot="{row}">
                                {{ row.renewPrice|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="115"
                            prop="penaltyPrice" align="center"
                            label="续费开始时间">
                            <template v-slot="{row}">
                                {{ row.renewStartTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="115"
                            prop="penaltyScore" align="center"
                            label="续费结束时间">
                            <template v-slot="{row}">
                                {{ row.renewEndTime|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="90"
                            prop="violationAddress" align="center"
                            label="续费设备">
                            <template v-slot="{row}">
                                {{ row.renewEquipmentNo|filterNull }}
                            </template>
                        </el-table-column>
                        <el-table-column show-overflow-tooltip min-width="90"
                            prop="deductionType" align="center"
                            label="续费品牌">
                            <template v-slot="{row}">
                                {{ row.expireGpsBrand|filterNull }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

        </div>

        <div v-if="activeName=='first'" class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">返回</el-button>
<!--            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>-->
        </div>

    </div>
</template>

<script>

import {gpsRenew, gpsRenewRecord} from "@/api/gps/gpsList";
import CarBaseInfo from "@/views/GPSManage/components/carBaseInfo.vue";

export default {
    name:"GPSRenewalDetail",
    components: {CarBaseInfo},
    dicts: ['quota_rent_type', 'gps_device_type'],
    data() {
        return {
            buttonLoading: false,
            activeName: 'first',
            form: {},
            recordList:[],
        };
    },
    watch:{
        '$route':{
            handler(val){
                console.log('this.$route', this.$route)

                if(val && val.name==this.$options.name){
                    if (this.$route.query && this.$route.query.gpsRenewId && !this.$route.query.tabClick) {
                        this.getOldData(this.$route.query.gpsRenewId, this.$route.query.carId);
                    }

                }
            },
            immediate:true,
            deep:true
        }
    },
    // mounted() {
    //     this.businessTypeList = businessTypeList
    //     this.getOldData(this.$route.query.gpsRenewId, this.$route.query.carId);
    // },
    methods: {
        getOldData(rid, cid) {
            gpsRenew(rid).then(res => {
                this.form = res.data
            })
            gpsRenewRecord({
                carId:cid
            }).then(res => {
                this.recordList = res.rows
            })
        },
        goDetail(row){

            this.getOldData(row.gpsRenewId, row.carId);
            this.activeName = 'first'

            // this.$router.push({
            //     name: 'IllegalListDetail',
            //     query: {carViolationId: row.carViolationId}
            // })
        },
        cancel(){
            this.$router.back();
this.$store.dispatch('tagsView/delView', this.$route);
        },
        // submitForm(){
        //     let that = this
        //     this.$refs["followForm"].validate(valid => {
        //         if (valid) {
        //             this.buttonLoading = true;
        //
        //             cluesFollowRecordAdd({
        //                 cluesId:that.$route.query.cluesId,
        //                 ...that.followForm
        //             }).then(res=>{
        //                 this.buttonLoading = false;
        //                 this.$modal.msgSuccess( "提交成功");
        //                 this.$router.back()
        //             }).finally(e=>{
        //                 this.buttonLoading = false;
        //             })
        //         }
        //     });
        // },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .el-form-item {
    margin-bottom: 10px !important;
    width: 70%;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}

::v-deep .el-table{
    margin-bottom: 20px !important;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

.basic{
    margin: -15px 0 0;
    ::v-deep .el-descriptions-item__cell {
        padding: 7px 0 !important;
    }
}
.basic{
    margin: -15px 0 0;
    ::v-deep .el-descriptions-item__cell {
        padding: 7px 0 !important;
    }
}

</style>
